import React, { useState } from "react";
import { Avatar, Dropdown, Layout, Menu, Space } from "antd";
import { NavLink, useLocation, useNavigate } from "react-router-dom";
import { setCookie, getLang } from "@/utils/index";
import { GlobalOutlined, UserOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import classNames from "classnames";
import styles from "./index.module.scss";
const { Header } = Layout;
const transLanguage = (lkey: any) => {
  let dl = "简体中文";
  switch (lkey) {
    case "zh":
      dl = "简体中文";
      break;
    case "en":
      dl = "English";
      break;
  }
  return dl;
};

const handleChangeLang = (key: any) => {
  setCookie("language", key, 31536000);
  setTimeout(() => {
    location.reload();
  }, 500);
  // i18n.changeLanguage(key);
};
export default function CusHeader() {
  const isLogin = localStorage.getItem("lanmei_token");
  const navigateto = useNavigate();
  const currentRoute = useLocation();
  const menuClick = (e: { key: string }) => {
    // 点击跳转到对应路由  编程式导航跳转 利用到一个hook
    navigateto(e.key);
  };
  const { t } = useTranslation();
  // 切换语言
  const [language]: any = useState(getLang());
  const items: any = [
    {
      key: "1",
      label: (
        <div
          onClick={() => {
            handleChangeLang("en");
          }}
        >
          ENGLISH
        </div>
      ),
    },
    {
      key: "2",
      label: (
        <div
          onClick={() => {
            handleChangeLang("zh");
          }}
        >
          简体中文
        </div>
      ),
    },
  ];

  const items2: any = [
    {
      label: (
        <Avatar
          style={{ backgroundColor: "#87d068" }}
          icon={<UserOutlined />}
        />
      ),
      children: [
        {
          label: "News configuration",
          key: "newsConfig",
        },
        {
          label: "personal information",
          key: "userInfo",
        },
        {
          label: (
            <a
              style={{ color: "red" }}
              onClick={() => {
                localStorage.removeItem("lanmei_token");
                location.href = "/login";
              }}
            >
              quit
            </a>
          ),
          key: "/login",
        },
      ],
    },
  ];
  return (
    <Header className={styles.header}>
      {/* LOGO */}
      <div className={styles.logo}>LOGO</div>
      <div style={{ display: "flex" }}>
        <div style={{ marginRight: "80px" }}>
          <NavLink
            className={({ isActive }) =>
              classNames(
                styles.homeItem,
                isActive ? styles.homeItem_active : ""
              )
            }
            to={"dataQuery"}
          >
            {t("查询")}
          </NavLink>
          <NavLink
            className={({ isActive }) =>
              classNames(
                styles.homeItem,
                isActive ? styles.homeItem_active : ""
              )
            }
            to={"nodeGuidance"}
          >
            {t("节点引导")}
          </NavLink>
          {/* 监控与统计 */}
          {isLogin && (
            <NavLink
              className={({ isActive }) =>
                classNames(
                  styles.homeItem,
                  isActive ? styles.homeItem_active : ""
                )
              }
              to={"monitor"}
            >
              {t("监控")}
            </NavLink>
          )}
          <NavLink
            className={({ isActive }) =>
              classNames(
                styles.homeItem,
                isActive ? styles.homeItem_active : ""
              )
            }
            to={"news"}
          >
            {t("新闻")}
          </NavLink>
        </div>
        {/* 语言切换 */}
        <Dropdown menu={{ items }} trigger={["click"]}>
          <a
            style={{
              color: "#fff",
              fontSize: 16,
            }}
          >
            <Space>
              <GlobalOutlined />
              {transLanguage(language)}
            </Space>
          </a>
        </Dropdown>
        {/* 用户 */}
        {isLogin && (
          <Menu
            style={{
              marginLeft: "30px",
              backgroundColor: "#104799",
            }}
            defaultSelectedKeys={[currentRoute.pathname]}
            selectedKeys={[currentRoute.pathname]}
            mode="horizontal"
            items={items2}
            onClick={menuClick}
          />
        )}
      </div>
    </Header>
  );
}
